 <template>
  <div class="app">
    <header>
      <div class="headcontent">
        <div class="head-left">
          <p class="soop">
            购物车 <img src="./1e3ab4753d33cb10b43266e752f37f7.png" alt="" />
          </p>
          <p class="ps">配送至:新源街261号固安县计生局</p>
        </div>
        <div class="head-right">
          <a href="">编辑</a>
          <p class="xyd"><span></span><span></span><span></span></p>
          <span class="hyd">{{ arr.length }}</span>
        </div>
      </div>
    </header>
    <main>
      <ul class="nav">
        <li @click="fn(0)" :class="{ active: toindex == 0 }">
          <span>全部</span><span>({{ arr.length }})</span>
        </li>
        <li @click="fn(1)" :class="{ active: toindex == 1 }">
          <span>降价</span><span>(1)</span>
        </li>
        <li @click="fn(2)" :class="{ active: toindex == 2 }">
          <span>常买</span><span>(0)</span>
        </li>
        <li @click="fn(3)" :class="{ active: toindex == 3 }">
          <span>分类</span><img src="./down.png" alt="" />
        </li>
      </ul>
      <div class="deta" v-for="item in arr">
        <div class="lover">
          <input type="checkbox" class="checkitem" v-model="item.check" @change="ge()">
          <label for=""></label>
          <div class="nav-right">
            <img src="./e3efe847e136577a9d87c3323a18a42.png" alt="" />
            <span>七夕情人节</span>
            <img src="./arrow-right-copy.png" alt="" />
          </div>
        </div>
        <div class="part">
          <div class="part-top">
            <div class="part-right">
              <p class="mj">
                <span>跨自营/店铺满折</span
                ><span>已满{{ item.cla }}件,已减{{ item.s }}元</span>
              </p>
              <p class="gg">
                <span>再逛逛</span><img src="./arrow-right-copy.png" alt="" />
              </p>
            </div>
          </div>
          <div class="part-bottom">
            <input type="checkbox" v-model="item.check" @change="ge()">
            <div class="patt-right">
              <img :src="item.pic" alt="" />
              <div class="t-right">
                <div class="title">
                  {{ item.title }}
                </div>
                <div class="t-bot">
                  <p>
                    <span
                      >烧鸡公160g两包<img
                        src="./down.png"
                        alt=""
                        class="i1" /></span
                    ><span
                      >换促销<img src="./down.png" alt="" class="i1"
                    /></span>
                  </p>
                  <div class="c-bot">
                    <div class="c-left">
                      <span>￥{{ item.str }}</span>
                      <div class="add-sub">
                        <b @click="sub(item)">-</b>
                        <span>{{ item.cla }}</span>
                        <b @click="add(item)">+</b>
                      </div>
                    </div>
                    <p class="yj">预估到手价 ￥{{ item.jg }}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
    <footer>
      <div class="f-b">
        <div class="f-left">
          <div class="checkall">
            <input type="checkbox" @change="chall()" v-model="all" />全选
          </div>
          <div class="youhui">
            <span>合计:￥{{ cp }}</span> <span>优惠减￥{{ mp }}</span>
          </div>
        </div>
        <div class="lq">领券结算({{ h }})</div>
      </div>
    </footer>
  </div>
</template>
 <script>
export default {
  data() {
    return {
      arr: [
        {
          title:
            "  海文铭福州正宗佛跳墙1250g加热即食鲍鱼海参花胶海鲜水产大盆菜生鲜盒装【已核酸检测】浓香款 1250克",
          price: "134",
          pic: "https://img10.360buyimg.com/mobilecms/s200x200_jfs/t1/205587/32/809/373552/6113d9a0E78e7117c/573edf0242f3a492.jpg!q70.dpg.webp",
          cla: 1,
          str: "134",
          yj: "7.8",
          s: "7.8",
          jg: "126.2",
          check: false,
        },
        {
          title:
            "  联想(Lenovo) 笔记本支架 电脑散热支架 笔记本散热器 6档调节 小新 拯救者铝合金可折叠笔记本配件",
          price: "69",
          pic: "https://img10.360buyimg.com/mobilecms/s200x200_jfs/t1/137232/20/19558/95895/60cc6478E837dba40/dbc47ee85577bb70.jpg!q70.dpg.webp",
          cla: 1,
          str: "69",
          yj: "2.8",
          s: "2.8",
          jg: "66.2",
          check: false,
        },
        {
          title:
            "  锐秘Ream男士亮颜弹润美白面膜控油补水保湿 去黑头淡斑 提亮肤色收缩毛孔 深层清洁男生面膜贴20片",
          price: "79",
          pic: "https://img10.360buyimg.com/mobilecms/s200x200_jfs/t1/46271/37/5314/323750/5d303894E67dc8b24/afa3db1406144e4c.jpg!q70.dpg.webp",
          cla: 1,
          str: "79",
          yj: "5.8",
          s: "5.8",
          jg: "73.2",
          check: false,
        },
      ],
      toindex: 0,
      odd: "",
      o: "",
      all: false,
      mar: 0.0,
      t: "",
      k: 0,
      h: 0,
    };
  },
  methods: {
    fn(index) {
      this.toindex = index;
    },
    add(item) {
      item.cla++;
      this.h = item.cla;
      item.str = item.price * item.cla;
      this.o = item.cla * item.yj;
      item.s = this.o.toFixed(1);
      item.jg = item.str - item.s;
    },
    sub(item) {
      if (item.cla > 1) {
        item.cla--;
        this.h = item.cla;
        item.str = item.price * item.cla;
        this.o = item.cla * item.yj;
        item.s = this.o.toFixed(1);
        item.jg = item.str - item.s;
      }
    },
    chall() {
      this.arr.forEach((item) => {
        item.check = this.all;
        if (this.all) {
          this.h++;
        } else {
          this.h = 0;
        }
      });
    },
    ge(){
      this.arr.forEach(item=>{
          if(item.check){
              this.h++;
          }
          else{
              this.h=0
          }
      })
    }
  },
  computed: {
    cp() {
      var sum = 0;
      this.arr.forEach((item) => {
        if (this.all) {
          sum += +item.str;
        } else if (item.check) {
          sum += +item.str;
        } else {
          sum = 0;
        }
      });
      return sum;
    },
    mp() {
      var num = 0;
      this.arr.forEach((item) => {
        if (this.all) {
          num += +item.s;
        } else if (item.check) {
          num += +item.s;
        } else {
          num = 0;
        }
      });
      return num.toFixed(2);
    },
  },
};
</script>

 <style lang='css'>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a {
  text-decoration: none;
}
ul,
li {
  list-style: none;
}

a,
input,
button {
  -webkit-tap-highlight-color: transparent;
  /* 移除点击产生的高亮效果：透明色 */
}
input,
button {
  -webkit-appearance: none;
  /* 在ios中加入这句能修改button和input的宽高 */
}
img,
a {
  -webkit-touch-callout: none;
  /* 禁止长按弹出菜单 */
}
img {
  vertical-align: middle;
}
html,
body,
.app {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
header {
  width: 100%;
  height: 5rem;
  background: #b6f2fd;
  padding-top: 1.5rem;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  padding-left: 3rem;
}
.headcontent {
  width: 17rem;
  height: 3rem;
  display: flex;
  justify-content: space-between;
}
.head-left {
  width: 11rem;
  height: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.active {
  color: red;
}
.soop {
  width: 5.8rem;
  color: #fefefc;
  font-size: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.soop img {
  width: 1rem;
  height: 1rem;
}
.ps {
  font-size: 13px;
  color: #fefefc;
  white-space: nowrap;
}
.head-right {
  width: 5rem;
  height: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
.head-right a {
  color: #f7ffff;
  font-size: 15px;
}
.xyd {
  width: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.xyd span {
  width: 0.3rem;
  height: 0.3rem;
  background: #ffffff;
  border-radius: 0.3rem;
}
.xyd span:nth-of-type(2) {
  width: 0.5rem;
  height: 0.5rem;
  background: #ffffff;
  border-radius: 0.5rem;
}
.hyd {
  width: 1rem;
  height: 0.8rem;
  background: red;
  border-radius: 0.5rem;
  position: absolute;
  top: 0rem;
  right: 0.1rem;
  color: #fffefd;
  font-size: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
main {
  flex: 1;
  background: #f9f9f9;
  overflow: auto;
}
.nav {
  width: 100%;
  height: 4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 18px 0px 18px;
  box-sizing: border-box;
}
.nav li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}
.nav li img {
  width: 1rem;
  height: 1rem;
}
.deta {
  width: 100%;
  height: 18rem;
  background: #ffffff;
  border-radius: 20px;
  padding-top: 1rem;
  box-sizing: border-box;
  padding-bottom: 2rem;
  display: flex;
  flex-direction: column;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-bottom: 20px;
}
.lover {
  width: 12rem;
  height: 1.8rem;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.lover input {
  width: 2rem;
  height: 100%;
  background-color: initial;
  cursor: default;
  appearance: checkbox;
  box-sizing: border-box;
  padding: initial;
  border: initial;
}
.nav-right {
  width: 8rem;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nav-right img {
  width: 1rem;
  height: 1rem;
}
.nav-right span {
  font-size: 14px;
}
.part {
  width: 100%;
  height: 12rem;
  display: flex;
  flex-direction: column;
}
.part-top {
  width: 100%;
  height: 1.5rem;
  padding-left: 1rem;
  display: flex;
  margin-bottom: 20px;
}
.part-right {
  width: 20rem;
  height: 100%;
  display: flex;
  justify-content: space-between;
}
.mj {
  width: 14rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mj span:nth-of-type(1) {
  font-size: 12px;
  background: #f72f18;
  color: #ffffff;
}
.mj span:nth-of-type(2) {
  white-space: nowrap;
  color: #1a1a1a;
  font-size: 13px;
}
.gg {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.gg span {
  font-size: 13px;
  color: #1a1a1a;
}
.gg img {
  width: 1rem;
  height: 1rem;
}
.part-bottom {
  width: 100%;
  height: 10rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.part-bottom input {
  width: 2rem;
  height: 2rem;
  background-color: initial;
  cursor: default;
  appearance: checkbox;
  box-sizing: border-box;
  padding: initial;
  border: initial;
}
.patt-right {
  width: 17rem;
  height: 100%;
  display: flex;
  justify-content: space-between;
}
.patt-right img {
  width: 6rem;
  height: 6rem;
  border-radius: 10px;
}
.t-right {
  width: 10.5rem;
  height: 100%;

  display: flex;
  flex-direction: column;
}
.title {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 14px;
  margin-bottom: 20px;
  color: #262626;
}
.t-bot {
  width: 100%;
  height: 5rem;

  display: flex;
  flex-direction: column;
}
.t-bot p {
  width: 100%;
  height: 1rem;
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}
.t-bot p span {
  height: 100%;
  display: flex;
  justify-content: space-between;
  color: #838383;
  font-size: 8px;
  white-space: nowrap;
  background: #f7f7f7;
  border-radius: 10px;
  align-items: center;
}
.t-bot p span:nth-of-type(1) {
  width: 6.5rem;
  white-space: nowrap;
}
.t-bot p span .i1 {
  width: 0.5rem;
  height: 0.5rem;
  border: none;
}
.c-bot {
  width: 100%;
  height: 4rem;

  display: flex;
  flex-direction: column;
}
.c-left {
  width: 100%;
  height: 1rem;

  display: flex;
  justify-content: space-between;
  align-items: center;
}
.c-left span {
  color: #262626;
}
.add-sub {
  width: 4rem;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.add-sub span {
  width: 2rem;
  height: 100%;
  background: #f5f5f5;
  text-align: center;
  font-size: 11px;
  line-height: 100%;
}
.yj {
  margin-top: 10px;
  color: #ed2a0e;
}
footer {
  width: 100%;
  height: 7rem;
  display: flex;
  flex-direction: column;
}
.ftop {
  width: 100%;
  height: 2rem;
  background: #fee9e8;
  display: flex;
  justify-content: space-between;
  padding-left: 1rem;
  padding-right: 1rem;
  align-items: center;
}
.ftop p {
  width: 12rem;
  display: flex;
  justify-content: space-between;
}
.ftop p span:nth-of-type(1) {
  display: flex;
  width: 5rem;
  height: 1.2rem;
  background: #fb3022;
  color: #ffefed;
  line-height: 1.2rem;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
}
.ftop p span:nth-of-type(2) {
  color: #f22f1d;
  font-size: 14px;
}
.ftop .f-right {
  width: 3rem;
  height: 1.5rem;
  border: 1px solid #f22d1c;
  border-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ee311e;
  font-size: 14px;
}
.f-b {
  width: 100%;
  height: 3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 0.8rem;
  padding-right: 0.8rem;
}
.f-left {
  width: 15rem;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.checkall {
  width: 4rem;
  height: 3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.checkall input {
  width: 2rem;
  height: 2rem;
  background-color: initial;
  cursor: default;
  appearance: checkbox;
  box-sizing: border-box;
  padding: initial;
  border: initial;
}
.youhui {
  display: flex;
  flex-direction: column;
}
.youhui span {
  font-size: 14px;
}
.lq {
  width: 6rem;
  height: 2.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fe3c45;
  color: #fffbfa;
  border-radius: 80px;
}

input[type="checkbox"] {
  margin-right: 5px;
  cursor: pointer;
  font-size: 14px;
  width: 15px;
  height: 12px;
  position: relative;
}

input[type="checkbox"]:after {
  position: absolute;
  width: 12px;
  height: 15px;
  top: -2px;
  left: -2px;
  content: " ";
  color: #fff;
  display: inline-block;
  visibility: visible;
  padding: 1px 2px;
  border-radius: 3px;
  background: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 15px;
  text-align: center;
  line-height: 15px;
}

input[type="checkbox"]:checked:after {
  content: "✓";
  font-size: 12px;
  font-weight: 600;
  background-color: #f94218;
}
</style>